// 获取用户列表功能
$.ajax({
    type: 'get',
    url: '/users',
    success: function(response) {
        var html = template('tpl', { data: response });
        $('#userBox').html(html);
    }
});

// 用户添加功能
$('#userForm').on('submit', function() {
    var formData = $(this).serialize();
    $.ajax({
        type: 'post',
        url: '/users',
        data: formData,
        success: function(response) {
            // 页面刷新
            location.reload();
        },
        error: function() {
            alert('用户添加失败');
        }
    });
    return false;
});

// 添加头像功能
$('#modifyBox').on('change', '#avatar', function() {
    var formData = new FormData();
    formData.append('avatar', this.files[0]);
    $.ajax({
        type: 'post',
        url: '/upload',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
            $('#hiddenAvatar').val(response[0].avatar);
            $('#preview').attr('src', response[0].avatar);
        }
    });
});

// 用户编辑功能
$('#userBox').on('click', '.edit', function() {
    var id = $(this).attr('data-id');
    $.ajax({
        type: 'get',
        url: '/users/' + id,
        success: function(response) {
            var html = template('modifyTpl', response);
            $('#modifyBox').html(html);
        }
    });
});

// 为修改表单添加表单提交事件
$('#modifyBox').on('submit', '#modifyForm', function() {
    var formData = $(this).serialize();
    var id = $(this).attr('data-id');
    $.ajax({
        type: 'put',
        url: '/users/' + id,
        data: formData,
        success: function(response) {
            // console.log(response);
            location.reload();
        }
    });
    return false;
});

// 当点击删除按钮时
$('#userBox').on('click', '.delete', function() {
    var id = $(this).attr('data-id');
    if (confirm('确定要删除用户吗')) {
        $.ajax({
            type: 'delete',
            url: `/users/${id}`,
            success: function(response) {
                // console.log(response);
                location.reload();
            }
        });
    }
});

// 点击全选按钮事件
$('#selectAll').on('change', function() {
    var status = $(this).prop('checked');
    $('#userBox .usersStatus').prop('checked', status);
    if (status) {
        $('#deleteMany').show();
    } else {
        $('#deleteMany').hide();
    }
});

$('#userBox').on('change', '.usersStatus', function() {
    if ($('#userBox .usersStatus').length == $('#userBox .usersStatus:checked').length) {
        $('#selectAll').prop('checked', true);
    } else {
        $('#selectAll').prop('checked', false);
    }
    if ($('#userBox .usersStatus:checked').length) {
        $('#deleteMany').show();
    } else {
        $('#deleteMany').hide();
    }
});

// 批量删除
$('#deleteMany').on('click', function() {
    var ids = [];
    var checkedUser = $('#userBox .usersStatus:checked');
    checkedUser.each(function(index, element) {
        ids.push($(element).attr('data-id'));
    });
    if (confirm('确定要批量删除吗')) {
        $.ajax({
            type: 'delete',
            url: '/users/' + ids.join('-'),
            success: function() {
                location.reload();
            }
        });
    }
});
